/**
* @Author: 李晨光
* @Date: 2019/11/11
* @Version: 1.0
* @Last Modified by: 李晨光
* @Last Modified time: 2019/11/11
**/
<comment>
  # 组件注释
</comment>
<template>
  <div style="height: 100%">
    <!-- <transition :name="transitionName">
      <router-view class="Router"></router-view>
    </transition>-->
    <transition :name="transitionName">
      <router-view></router-view>
    </transition>
    <!-- <mt-tabbar v-model="selected" v-if="home_footer_flag">
      <mt-tab-item :id="0">
        <router-link :to="{ path: '/' }" class="ly_flex ly_flex_col">
          <span class="iconfont spm-icon-piechart"></span>
          看板
        </router-link>
      </mt-tab-item>
      <mt-tab-item :id="1">
        <router-link :to="{ path: '/' }" class="ly_flex ly_flex_col">
          <span class="iconfont spm-icon-fileprotect"></span>
          业务
        </router-link>
      </mt-tab-item>
      <mt-tab-item :id="2">
        <router-link :to="{ path: '/' }" class="ly_flex ly_flex_col">
          <span class="iconfont spm-icon-plus-circle colourfulHallIcon"></span>
          <span class="colourfulHall"></span>
        </router-link>
      </mt-tab-item>
      <mt-tab-item :id="3">
        <router-link :to="{ path: '/mainMenu' }" class="ly_flex ly_flex_col">
          <span class="iconfont spm-icon-copy4"></span>
          应用
        </router-link>
      </mt-tab-item>

      <mt-tab-item :id="4">
        <router-link :to="{ path: '/' }" class="ly_flex ly_flex_col">
          <span class="iconfont spm-icon-copy18"></span>
          我的
        </router-link>
      </mt-tab-item>
    </mt-tabbar> -->
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  props: {},
  data() {
    return {
      return_frequency: 0, //返回次数
      selected: 3,
      home_footer_flag: true,
      routeList: [],
      transitionName: "slide-left" // 默认动态路由变化为slide-left
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods:{},
  watch: {
    //使用watch 监听$router的变化
    $route(to, from) {
      //如果to索引大于from索引,判断为前进状态,反之则为后退状态
      if (to.meta.index > from.meta.index) {
        //设置动画名称
        this.transitionName = "slide-left";
      } else {
        this.transitionName = "slide-right";
      }
    }
  },

  methods: {},
  destroyed() {}
};
</script>

<style lang="scss">
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.Router {
  position: absolute;
  width: 100%;
  transition: all 0.5s ease;
  height: calc(100vh - 0.55rem);
  box-sizing: border-box;
  overflow: auto;
}

// .slide-left-enter,
// .slide-right-leave-active {
//   opacity: 1;
//   -webkit-transform: translate(100%, 0);
//   transform: translate(100%, 0);
// }

// .slide-left-leave-active,
// .slide-right-enter {
//   opacity: 1;
//   -webkit-transform: translate(-100%, 0);
//   transform: translate(-100% 0);
// }

.mint-tabbar {
  z-index: 990;
  background: rgb(251, 252, 255);
}

.mint-tab-item-label {
  position: relative;
  display: flex;
  flex-direction: column;
  font-size: 0.14rem;
  color: rgb(153, 153, 153);
}

.mint-tab-item-label span {
  font-size: 0.2rem;
  margin-bottom: 0.05rem;
}

.mint-tab-item-label span.colourfulHallIcon {
  position: absolute;
  top: -0.3rem;
  left: 50%;
  margin-left: -0.23rem;
  display: block;
  width: 0.45rem;
  height: 0.45rem;
  line-height: 0.45rem;
  background: rgb(251, 252, 255);
  border-radius: 0.23rem;
  text-align: center;
  font-size: 0.3rem;
}

.mint-tab-item-label span.colourfulHall {
  font-size: 0.14rem;
  margin-top: 0.26rem;
}

.mint-tabbar > .mint-tab-item.is-selected {
  /*background: #FF8A1B;*/
  /*color: #fff;*/
}

.mint-tab-item .router-link-active {
  color: #ff8a1b;
}

</style>
